<!--
 * @Author: tianhao
 * @Date: 2021-07-10 08:10:03
 * @LastEditTime: 2021-07-13 13:42:27
 * @LastEditors: tianhao
 * @Description: 行学天下项目
 * @FilePath: \day01c:\Users\ASUS\Desktop\xx\7月实训\day02\index.html
 * 可以输入预定的版权声明、个性签名、空行等
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行学天下-首页</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div class="header">
        <div class="headLeft">
        <div class="logo">
            行学天下
        </div>
        <div class="title">
            行学天下
        </div>
        </div>
        <div class="headRight">
        <div class="callMe">
            <a href="#callMe">
            <img src="img/callMe.png">
            致电我们
        </a>
        </div>
            </div>
            </div>
   
            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in carousel" :key="item.id">
                  <img :src="item.url" alt="">
                </el-carousel-item>
              </el-carousel>
        <div class="youXue">
            <div class="myH2">
              精选游学项目
            </div>
            <!-- {{project}} -->
            <div class="myUl" v-for="item in project" @click="toDetails(item.id)">
              <img v-if="!item.figure" src="img/image/img1.jpg" alt="">
              <img v-else :src="item.figure" alt="">
              <div class="title">{{item.name}}</div>
              <div class="date">{{ formatDate(item.beginTime) }} ~ {{formatDate(item.endTime)}}</div>
              |
              <div class="city">{{item.region}}</div>
              <div class="desc">{{item.introduce}}</div>
            </div>
          </div>
          <!-- 学生风采 -->
          <div class="fengCai">
            <div class="myH2">
              学生风采
            </div>
            <div class="myFengCaiDiv">
              <!-- {{article}} -->
              <div class="myFengCai" v-for="item in article">
                  <div   @click="toDetails2(item.id)">
                <img v-if="!item.cover" src="img/image/img1.jpg" alt="">
                <img v-else :src="item.cover" alt="">
                
                <div class="title">{{item.title.length<22?item.title:item.title.slice(0,23)+'...'}}</div>
                <div class="date">{{formatDate(item.publishTime)}}</div>
                <div class="name">{{item.baseUser.realname}}</div>
                <div class="like"><i class="el-icon-thumb"></i>{{item.thumpUp}}</div>
            </div>
                <div class="likeBtn">
                    <el-button type="warning" icon="el-icon-thumb" circle @click="thumbUp(item.id)"></el-button>
                </div>
                </div>
            </div>
           </div>
           <div class="wenTi">
            <div class="myH2">
                常见问题
            </div>
            <div class="myWenti">
                <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？   
                </div>
                <div class="desc">
                    其实年龄小的时候多出去是非常有利于孩子的身心的，
                    能够在成长阶段多看看外面的世界、多吸收不同的文化、
                    学习不同的思维方式。孩子的适应性和应变能力有的时候比大
                    人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，
                    出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，
                    学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家
                    长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团
                    的时候务必仔细。英孚在这方面有50多年的经验，出发会有国
                    内领队带团；而国外夏令营的学校都是英孚自己的学校，海外
                    的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。
                    家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、
                    活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长
                    保持联系。
                </div>
                <img src="img/image/1.png" alt="">
            </div>
            <div class="myWenti">
                <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？   
                </div>
                <div class="desc">
                    其实年龄小的时候多出去是非常有利于孩子的身心的，
                    能够在成长阶段多看看外面的世界、多吸收不同的文化、
                    学习不同的思维方式。孩子的适应性和应变能力有的时候比大
                    人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，
                    出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，
                    学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家
                    长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团
                    的时候务必仔细。英孚在这方面有50多年的经验，出发会有国
                    内领队带团；而国外夏令营的学校都是英孚自己的学校，海外
                    的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。
                    家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、
                    活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长
                    保持联系。
                </div>
                <img src="img/image/1.png" alt="">
            </div>
           </div>
           <el-backtop></el-backtop>
           <div class="footer">
               <div id="callMe" class="callMe">
               联系我们 {工作时间：9:00-17:30}
               12312
               <a href="http://baidu.com">baidu.com</a>
               <a target="_blank" href="http://briup.cn">在线客服</a>
            </div>
            <div class="beiAn">
                <a href="#">京ICP备XXXXXXXX号</a>
                <a href="#">公安备案000000</a>
            </div>
            <div class="callMe">
                ©1999-2021杰普软件科技有限公司
            </div>
           </div>
    </div>
</body>

<!-- <script>
    var index = 0;
    var timer;
    //通过定时器切换图片
    function myTimer(){
        timer = setInterval(
            function(){
                index++;
                if(index>2){
                    index=0;
                }
                $('.item').eq(index).show().siblings().hide();
                $('.btn').eq(index).addClass('active').siblings().removeClass('active');
            },3000
        )
    }
    this.myTimer();
    var that = this;
    $('.nextBtn').click(function(){
        index++;
        if(index > 2){
            index = 0;
        }
        $('.item').eq(index).show().siblings().hide();
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
        clearInterval(timer);
        that.myTimer();
    });
    $('.lastBtn').click(function(){
        index--;
        if(index < 0){
            index = 2;
        }
        $('.item').eq(index).show().siblings().hide();
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
        clearInterval(timer);
        that.myTimer();
    });
    $('.btn').click(function(){
        index = $(this).index();
        $('.item').eq(index).show().siblings().hide();
        $(this).addClass('active').siblings().removeClass('active');
        clearInterval(timer);
        that.myTimer();
    })
</script> -->
<!--请求引入数据-->
<script>
    new Vue({
      el: '#app',
      data: {
        project: [],
        article: [],
        carousel:[],
      },
      created() {
        this.findProject();
        this.findArticle();
        this.findCarousel();
      },
      methods: {
        // 查询游学项目
        findProject() {
          axios.get('http://47.94.46.113:8888/index/project/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
            this.project = res.data.data.list
          })
        },
        // 将时间戳格式化
        formatDate(date) {
          return moment(date).format('YYYY-MM-DD')
        },
        // 查询学生风采
        findArticle() {
          axios.get('http://47.94.46.113:8888/index/article/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
            this.article = res.data.data.list
          })
        },
        //查询所有轮播图
        findCarousel() {
          axios.get('http://47.94.46.113:8888/index/carousel/findAll').then((res) => {
            this.carousel = res.data.data
          })
        },
        //跳转到游学项目详情页面
        toDetails(id) {
        window.location.href = "details.html?id=" + id;
      },
      toDetails2(id) {
        window.location.href = "details2.html?id=" + id;
      },
      thumbUp(id) {
          axios.get('http://47.94.46.113:8888/index/article/thumbUp?id='+id).then((res) => {
          console.log(res);
            this.findArticle();
            this.$message({
                message: res.data.message,
                type: 'success'
            });
          })
        }
      }
    })
  </script>
</html>